
<template>
  <div class="dkuang">
    <div class="kuang">
      <div style="margin-left: 85px;"><h1>会员注册</h1></div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
        <el-form-item label="姓名" prop="name">
          <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="会员性别" >
          <el-select v-model="ruleForm.sex" placeholder="请选择" style="width: 348px;">
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item style="margin-bottom: 0px;">
          <el-radio-group v-model="ruleForm.Sex" @change="changeHandler">
              <el-radio class="radio" label="1">男</el-radio>
              <el-radio class="radio" label="2">女</el-radio> 
          </el-radio-group>
        </el-form-item> -->
                  
          <!-- <el-form-item lable ="性别" prop="sex" style="">
            <el-radio v-model="radio" label="1">男</el-radio>
            <el-radio v-model="radio" label="2">女</el-radio>
          </el-form-item> -->


        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="身份证" prop="idCard">
          <el-input v-model.number="ruleForm.idCard" maxlength="11"></el-input>
        </el-form-item>

        <el-form-item label="电话" prop="tel">
          <el-input v-model.number="ruleForm.tel" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-input v-model="ruleForm.createTime" autocomplete="off" disabled></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
      
  </div>
  
</template>
<script>
import http from "../../http/http";
import { mapActions }from "vuex";
  export default {
    computed: {
      
    },
    data() {
      // itme.createTime = new Date(itme.createTime).toLocaleString();
      var checkTel = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('电话不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } 
          else {
            
            if (value < 10000000000) {
              callback(new Error('电话位数不对'));
            
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validateName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入姓名'));
        } 
        else {
          
          callback();
        }
      };

      var validatePasss = (rule, value, callback)=>{
        if(value===''){
          callback(new Error('请输入密码'));
        }else{
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
           callback();
        }
      }

      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      }
      var validateidCard = (rule,value,callback) => {
        if(value === ''){
          callback(new Error('请输入身份证号码'));
        }else{
          callback();
        }
      };
      
      return {
        Sex: 'man',
        ruleForm: {
          createTime:this.CurentTime(),
          delFlag:false,
          id:this.$store.state.zlStore.demo.length+1,
          name: '',
          password: '',
          checkPass: '',
          phone: '',
          idCard:'',
          tel:'',
          money:0,
        },
        rules: {
          name: [
            { validator: validateName, trigger: 'blur' }
          ],
          password: [
            { validator: validatePasss, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          tel: [
            { validator: checkTel, trigger: 'blur' }
          ],
          idCard: [
            { validator: validateidCard, trigger: 'blur' }
          ]
        }
      };
    },


    methods: {
       ...mapActions(["addUser"]),
           // 获取日期
        CurentTime() {
          var now = new Date();
          var year = now.getFullYear(); //年
          var month = now.getMonth() + 1; //月
          var day = now.getDate(); //日
          // var hh = now.getHours(); //时
          // var mm = now.getMinutes(); //分
          // var ss = now.getSeconds(); //秒
          var clock = year + "-";
          if (month < 10) clock += "0";
          clock += month + "-";
          if (day < 10) clock += "0";
          clock += day;
          // if (hh < 10) clock += "0";
          // clock += hh + ":";
          // if (mm < 10) clock += "0";
          // clock += mm + ":";
          // if (ss < 10) clock += "0";
          // clock += ss;
          return clock;
        },
       changeHandler(value) {
            console.log('改变之后的值是:' + value)
        },
        
      submitForm(formName) {
      //  let a =  this.ruleForm.name
        this.$refs[formName].validate((valid) => {
               
          if (valid) {
            this.$confirm("确认是否添加会员？","提示",{
              confirmButtonText:"确定",
              cancelButtonText:"取消",
              type: "warning",
            })
              .then(()=>{
                
                this.$message({
                  type:"succes",
                  message:"添加成功！",
                });
                this.$router.push("/HYGL/chaxunhuiyuan")
                let obj = {
                  name: this.ruleForm.name,
                  password: this.ruleForm.password,
                  idCard:this.ruleForm.idCard,
                  tel:this.ruleForm.tel,
                  sex:this.ruleForm.sex,
                };
                console.log(obj)
                this.$store.dispatch("addUser" , obj) ;
                 this.$refs[formName].resetFields();
                 console.log(addUser)
              })
              .catch(() => {
                this.$message({
                  type:"info",
                  message:"已取消添加",
                  
                })
              })
          } else {
            console.log('error submit!!');
            console.log(this.ruleForm.password)
            return false;
          }
        });
      },
      resetForm(formName) {
        
      //   http({
      //   method:"post",
      //   url:"/website/Employeecontroller/regesterUser",
      //   data:{
      //             name: "this.name",
      //             password: 111,
      //             idCard:111,
      //             tel:111,
      //             sex:111,
      //   }
      // }).then(res =>{
      //   console.log(res);
      // }).catch(err =>{
      //   console.log(err);
      // })
      // console.log(this.ruleForm.name)
      //   console.log(this.ruleForm.password)
      //   console.log(this.ruleForm.idCard)
      //   console.log(this.ruleForm.tel)
      //   console.log(this.ruleForm.sex)

        this.$refs[formName].resetFields();
        this.ruleForm.createTime = this.CurentTime();
        console.log(this.ruleForm.sex)
      }
    }
  }
</script>
<style scoped>
.sex{
  margin-left: 50px;
  margin-bottom: 20px;
}
.dkuang{
  margin-left: 450px;
  
  width: 450px;
  /* background-color:beige; */
  
}

</style>